<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>可滚动缩放的刻度尺</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#1E40AF',
            neutral: '#F3F4F6',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .scale-container {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      
      .ruler {
        position: relative;
        height: 80px;
        padding: 0 20px;
        box-sizing: border-box;
      }
      
      .ruler-marks {
        position: absolute;
        top: 0;
        left: 10px;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      
      .mark {
        width: 1px;
        background-color: #9CA3AF;
        position: relative;
      }
      
      .mark.small {
        height: 15px;
      }
      
      .mark.large {
        height: 30px;
        background-color: #374151;
      }
      
      .mark-value {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #1F2937;
        font-weight: 500;
      }
      
      .scrollbar-container {
        width: 100%;
        height: 20px;
        background-color: #F3F4F6;
        border-radius: 10px;
        position: relative;
        margin-top: 10px;
      }
      
      .scrollbar-thumb {
        position: absolute;
        height: 30px;
        width: 40px;
        background-color: #3B82F6;
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .scrollbar-thumb:hover {
        background-color: #2563EB;
      }
      
      .scrollbar-thumb::before,
      .scrollbar-thumb::after {
        content: "";
        width: 8px;
        height: 2px;
        background-color: white;
        position: absolute;
      }
      
      .scrollbar-thumb::before {
        left: 12px;
      }
      
      .scrollbar-thumb::after {
        right: 12px;
      }
      
      .center-indicator {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        background-color: #EF4444;
        z-index: 10;
        transform: translateX(-50%);
      }
    }
  </style>
</head>
<body class="bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold text-gray-800 mb-6">可滚动刻度尺</h2>
    
    <div class="scale-container" id="scaleContainer">
      <!-- 中心指示器 -->
      <div class="center-indicator"></div>
      
      <!-- 刻度尺 -->
      <div class="ruler bg-gray-50 rounded-md border border-gray-200">
        <div class="ruler-marks" id="rulerMarks"></div>
      </div>
      
      <!-- 滚动条 -->
      <div class="scrollbar-container">
        <div class="scrollbar-thumb" id="scrollbarThumb"></div>
      </div>
    </div>
    
    <div class="mt-6 text-sm text-gray-500">
      <p>当前位置: <span id="currentValue" class="font-medium text-primary">50</span></p>
    </div>
  </div>

  <script>
    // 获取DOM元素
    const rulerMarks = document.getElementById('rulerMarks');
    const scrollbarThumb = document.getElementById('scrollbarThumb');
    const scrollbarContainer = document.querySelector('.scrollbar-container');
    const scaleContainer = document.getElementById('scaleContainer');
    const currentValue = document.getElementById('currentValue');
    
    // 配置参数
    const totalUnits = 100; // 总刻度值
    const visibleRange = 50; // 可见范围
    const unitWidth = 10; // 每个单位的宽度(px)
    
    // 计算总宽度
    const totalWidth = totalUnits * unitWidth;
    const containerWidth = visibleRange * unitWidth;
    
    // 设置刻度尺宽度
    rulerMarks.style.width = `${totalWidth}px`;
    
    // 生成刻度
    for (let i = 1; i <= totalUnits; i++) {
      const mark = document.createElement('div');
      mark.classList.add('mark');
      
      // 每10个单位是大刻度，其余是小刻度
      if (i % 10 === 0) {
        mark.classList.add('large');
        
        // 添加刻度值标签
        const valueLabel = document.createElement('div');
        valueLabel.classList.add('mark-value');
        valueLabel.textContent = i;
        mark.appendChild(valueLabel);
      } else {
        mark.classList.add('small');
      }
      
      // 设置每个刻度的位置
      mark.style.left = `${(i - 1) * unitWidth}px`;
      rulerMarks.appendChild(mark);
    }
    
    // 滚动逻辑
    let isDragging = false;
    
    // 计算滚动条相关尺寸
    const scrollbarWidth = scrollbarContainer.offsetWidth;
    const thumbWidth = scrollbarThumb.offsetWidth;
    const maxScrollPosition = scrollbarWidth - thumbWidth;
    const maxRulerScroll = totalWidth - containerWidth;
    
    // 更新位置显示
    function updateCurrentValue(scrollPosition) {
      // 计算当前滚动比例
      const scrollRatio = scrollPosition / maxScrollPosition;
      // 计算对应的刻度值
      const value = Math.round(1 + (totalUnits - visibleRange) * scrollRatio);
      currentValue.textContent = value;
    }
    
    // 拖动滚动条
    function moveScrollThumb(clientX) {
      // 计算滚动条可移动范围
      const containerRect = scrollbarContainer.getBoundingClientRect();
      let newPosition = clientX - containerRect.left - thumbWidth / 2;
      
      // 限制在有效范围内
      newPosition = Math.max(0, Math.min(newPosition, maxScrollPosition));
      
      // 设置滑块位置
      scrollbarThumb.style.left = `${newPosition}px`;
      
      // 计算刻度尺应该滚动的距离
      const scrollRatio = newPosition / maxScrollPosition;
      const rulerScroll = maxRulerScroll * scrollRatio;
      
      // 移动刻度尺
      rulerMarks.style.transform = `translateX(-${rulerScroll}px)`;
      
      // 更新当前值显示
      updateCurrentValue(newPosition);
    }
    
    // 鼠标/触摸事件
    scrollbarThumb.addEventListener('mousedown', (e) => {
      isDragging = true;
      e.preventDefault();
    });
    
    document.addEventListener('mousemove', (e) => {
      if (isDragging) {
        moveScrollThumb(e.clientX);
      }
    });
    
    document.addEventListener('mouseup', () => {
      isDragging = false;
    });
    
    // 支持触摸设备
    scrollbarThumb.addEventListener('touchstart', (e) => {
      isDragging = true;
      e.preventDefault();
    });
    
    document.addEventListener('touchmove', (e) => {
      if (isDragging) {
        moveScrollThumb(e.touches[0].clientX);
      }
    });
    
    document.addEventListener('touchend', () => {
      isDragging = false;
    });
    
    // 点击滚动条空白处也能移动
    scrollbarContainer.addEventListener('click', (e) => {
      if (e.target === scrollbarContainer) {
        moveScrollThumb(e.clientX);
      }
    });
    
    // 初始化位置在中间
    moveScrollThumb(scrollbarWidth / 2 + scrollbarContainer.getBoundingClientRect().left);
  </script>
</body>
</html>